<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <!--[if lt IE 10]>
    	<script src="/resources/js/placeholders.min.js"></script>
    <![endif]-->
    <style type="text/css">
		#lastDataDis{
			text-align: center;
			width: 100%;
			height: 30px;
			position: relative;
			margin: 20px auto;
			display: none;
		}
		#lastDataDis h5{
			color: #808080;
			font-weight: bold;
		}
		#lastDataDis div{
			width: 100%;
			height: 2px;
			background-color: #ddd;
			border-bottom: 1px solid #ffffff;
		}
		#notLoadData{
			text-align: center;
			width: 100%;
			display: none;
		}
		.noData-Message{
			display: none;
			text-align: center;
			margin-top: 40px;
		}
		.post-wrapper{
			margin: 0 auto;
			width: 560px;
			min-height: 100%;
			padding: 30px 30px;
			border: 1px solid #DDD;
			background-color: #f4f4f4;
			margin-top: -50px;
			padding-top: 50px;
		}
		#itemList{
			width: 100%;
			margin-top: 45px;
			position: relative;
		}
		#select-layout{
			position: absolute;
			top: 0;
			right: -125px;
			background-color: #fff;
			padding: 5px 15px;
			box-shadow: 0 0 12px rgba(0,0,0,.1);
			border-radius: 4px;
			white-space: nowrap;
		}
		#select-layout a{ display: inline-block; }
		#select-layout i{ color: #ccc; font-size: 18px; }
		/*--------------------------------------------------------------------  */
		#recommendUser{
			width: 100%;
			margin: 45px auto;
			overflow: auto;
		}
		.recmd-profile{
			width: 100%;
			background-color: #fff;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
			-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
			margin-bottom: 20px;
			overflow: hidden;
		}
		.recmd-profile{
			position: relative;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
			margin-top: 10px;
		}
		.recmd-profile > .recmd-profile-header{
			padding: 8px 8px 0 8px;
			position: relative;
		}
		.recmd-profile > .recmd-profile-header button{
			position: absolute;
			top: 12px;
			right: 12px;
			border: 1px solid #4F8EF7;
			color: #4F8EF7;
			background-color: #fff;
			border-radius: 22px;
			padding: 3px 0;
			width: 90px;
			height: 26px;
			text-align: center;
			font-size: 13px;
			-webkit-transition: all 0.2s;
	    	-moz-transition: all 0.2s;
	    	-o-transition: all 0.2s;
	    	transition: all 0.2s;
		}
		.recmd-profile > .recmd-profile-header button:hover{
			background-color: #4F8EF7;
			color: #fff;
		}
		.recmd-profile > .recmd-profile-header button.active{
			background-color: #40AF2F!important;
			border: 1px solid #40AF2F!important;
			color: #fff;
		}
		.recmd-profile > .recmd-profile-header img{
			width: 45px;
			height: 45px;
			border-radius: 50%;
			position: absolute;
			left: 10px;
			border: 1px solid #efefef;
		}
		.recmd-profile > .recmd-profile-header > div{
			width: 100%;
			padding-left: 60px;
			overflow: hidden;
			white-space: nowrap;
		}
		.recmd-profile > .recmd-profile-header p{
			margin-bottom: 0px;
			font-size: 17px;
			font-weight: bold;
			color: #333333;
			text-align: left;
		}
		.recmd-profile > .recmd-profile-header span{
			display: block;
			text-align: left;
			color: #808080;
		}
		.recmd-profile > .recmd-profile-images{
			width: 100%;
			padding: 8px;
			float: none;
			clear: both;
			overflow: hidden;
		}
		.recmd-profile > .recmd-profile-images > div{
			width: 20%;
			height: 120px;
			float: left;
			overflow: hidden;
			padding: 2px;
		}
		.recmd-profile > .recmd-profile-images > div > img{
			width: auto;
			min-width: 100%;
			height: 100%;
		}
		.recmd-profile > .recmd-profile-images > div > img:hover{
			-ms-filter: 'alpha(opacity=60)';
			opacity: .6;
		}
		.recmd-profile > .recmd-profile-bottom{
			margin-top: 2px;
			padding: 8px;
		}
		/*--------------------------------------------------------------------  */
		.post-box{
			margin-bottom: 35px;
			background-color: #fff;
			-moz-box-shadow: 0 0 12px rgba(0,0,0,.1);
			-webkit-box-shadow: 0 0 12px rgba(0,0,0,.1);
			box-shadow: 0 0 12px rgba(0,0,0,.1);
			border-radius: 2px;
			width: 100%;
			position: relative;
		}
		.section-profile{
			position: absolute;
			top: 0;
			right: 560px;
			white-space: nowrap;
			padding-right: 56px;
		}
		.section-profile > .profile-image{
			position: absolute;
			top: 0;
			right: 0;
			width: 45px;
			height: 45px;
			border-radius: 2px;
			overflow: hidden;
		}
		.section-profile > .profile-image img{
			width: 100%;
			height: 100%;
		}
		.section-profile .profile-name{
			color: #527896;
			font-size: 16px;
			font-weight: bold;
			line-height: 180%;
			text-shadow: 1px 1px 0px rgba(243,243,243,1);
		}
		.section-profile .profile-time{
			color: #a7a7a7;
			font-size: 13px;
		}
		.section-image{
			width: 100%;
			overflow: hidden;
			position: relative;
			-webkit-transition: all 0.2s;
	    	-moz-transition: all 0.2s;
	    	-o-transition: all 0.2s;
	    	transition: all 0.2s;
		}
		.section-image:hover .post-title{
			display: block;
		}
		.post-title{
			position: absolute;
			left: 15px;
			bottom: 15px;
			color: #fff;
			font-size: 14px;
			text-shadow: #444 0 1px 1px;
			opacity: .85;
			display: none;
		}
		.swipe {
			height:100%;
			overflow: hidden;
			visibility: hidden;
			position: relative;
		}
		.swipe-wrap {
			overflow: hidden;
			position: relative;
		}
		.swipe-wrap > div {
			float:left;
			width:100%;
			position: relative;
			text-align: center;
			overflow: hidden;
			border-top-left-radius:4px;
			border-top-right-radius:4px;
		}
		.swipe-wrap > div > img{
			max-width: 100%;
			height: auto;
		}
		.section-image:hover .slide-image-arrow{
			visibility: visible;
		}
		.carousel-indicators > li {
			margin-right: 2px!important;
		}
		.slide-image-arrow{
			position: absolute;
			top:0;
			width: 60px;
			height: 100%;
			z-index: 3;
			cursor: pointer;
			opacity: .55;
			display: block;
			visibility: hidden;
		}
		.slide-image-arrow:hover{
			opacity: 1;
		}
		.slide-arrow{
			position: absolute;
			top:43%;
			font-size: 50px;
			color: #fff;
			text-shadow: #444 0 1px 1px;
		}
		.section-content{
			padding: 25px 15px;
			width: 100%;
			word-break: break-all;
			white-space: pre-line;
		}
		.section-tag a { display: inline-block; }
		.section-source{
			padding: 6px 15px;
			width: 100%;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			font-size: 13px;
		}
		.section-button{
			padding: 6px 8px 10px 8px;
			position: relative;
			border-top: 1px solid #e7e7e7;
			white-space: nowrap;
		}
		.section-button button{
			width: 33.3%;
			border: 0;
			background-color: #fff;
			color: #555;
			font-size: 13px;
		}
		.section-button button > span{
			font-size: 13px;
			font-weight: bold;
			color: #555;
			padding-left: 5px;
		}
		.like-memberlist{
			list-style: none;
			padding-left: 0;
			width: 40%;
			position: absolute;
			top: 10px;
			right: 13px;
			text-align: right;
			overflow: hidden;
			white-space: nowrap;
		}
		.like-memberlist .lm-more{
			display: inline-block;
			width: 35px;
			height: 35px;
			color: #aaa;
			padding: 7px;
			cursor: pointer;
		}
		.like-memberlist > a{
			width: 35px;
			height: 35px;
			display: inline-block;
			margin-left: 5px;
		}
		.like-memberlist > a > img{
			width: 35px;
			height: 35px;
			border-radius: 2px;
		}
		.section-count{
			font-size: 13px;
			padding: 14px;
		}
		.section-comment{
			background-color: #fafafa;
			border-bottom-left-radius: 2px;
			border-bottom-right-radius: 2px;
		}
		.section-comment .comment-line{
			width: 100%;
			height: 1px;
			background-color: #e4e4e4;
			box-shadow: 0 1px 1px rgba(0,0,0,.06);
		}
		.section-comment .comment-write{
			padding: 8px 12px 14px 12px;
			width: 100%;
			position: relative;
		}
		.section-comment .comment-write-btn{
			position: absolute;
			top:8px;
			right:8px;
			display: none;
			padding:5px 16px;
			font-size: 13px;
			height:30px;
			border-radius: 2px;
		}
		.section-comment .comment-update{
			display: none;
			padding: 8px 12px;
			height: 51px;
			width: 100%;
			position: relative;
			padding-right: 75px;
		}
		.section-comment .comment-form{
			width: inherit;
			height: 30px;
			border: 1px solid #E9E9E9;
			border-radius: 2px;
			padding: 4px 0 4px 6px;
			box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
		}
		.section-comment .comment-toolbar{
			padding: 8px 12px;
			position: relative;
			display: none;
		}
		.section-comment .comment-list-wrapper{
		}
		.comment-list{
			padding: 8px 12px 0 12px;
			-webkit-transition: all 0.7s ease 0s;
	    	-moz-transition: all 0.7s ease 0s;
	    	-o-transition: all 0.7s ease 0s;
	    	transition: all 0.7s ease 0s;
		}
		.comment{
			width: 100%;
			min-height: 45px;
			position: relative;
		}
		.comment:focus .comment-edit,.comment:hover .comment-edit,.comment:focus .comment-reply,.comment:hover .comment-reply,.comment:focus .comment-report,.comment:hover .comment-report{
			display: block;
		}
		.comment > .comment-profileImage{
			padding-top: 3px;
			float: left;
		}
		
		.comment > .comment-profileImage > a > img{
			width: 35px;
			height: 35px;
			border-radius: 2px;
		}
		.comment > .comment-info{
			margin-left: 45px;
		}
		.comment > .comment-info > .comment-content{
			padding-bottom: 6px;
			word-break: break-all;
		}
		.comment > .comment-info > .comment-time{
			font-size: 12px;
			color: #AAA;
			margin-left: 8px;
		}
		.comment > .comment-info > .comment-like{
			margin-left: 8px;
			cursor: pointer;
			color: #acacac;
			font-size: 13px;
		}
		.comment > .comment-info > .comment-like > span{
			color:#666;
			font-size:13px;
			font-weight:bold;
		}
		.comment > .comment-reply{
			position: absolute;
			top: 0;
			right: 23px;
			display: none;
		}
		.comment > .comment-reply > i{
			font-size: 14px;
			color: #AAA;
			cursor: pointer;
		}
		.comment > .comment-edit{
			position: absolute;
			top: 0;
			right: 0;
			display: none;
			background-color: transparent!important;
		}
		.comment > .comment-edit.open{
			display: block!important;
		}
		.comment > .comment-edit > i{
			font-size: 12px;
			color: #AAA;
			cursor: pointer;
		}
		.comment > .comment-report{
			position: absolute;
			top: 0;
			right: 0;
			display: none;
		}
		.comment > .comment-report > i{
			font-size: 14px;
			color: #AAA;
			cursor: pointer;
		}
		.cmt-dropdown{
			left:inherit;
			right: -7px;
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.22);
			border: 0;
			margin-top: 12px;
			min-width: 80px;
		}
		.cmt-dropdown > li{
			text-align: center;
			padding: 4px 0;
			cursor: pointer;
			font-weight: bold;
			font-size: 13px;
		}
		.cmt-dropdown > li:hover{
			background-color: #428bca;
			color: #fff!important;
		}
		.cmt-dropdown::after {
		  position: absolute;
		  top: -7px;
		  right: 5px;
		  display: inline-block;
		  border-right: 9px solid transparent;
		  border-bottom: 9px solid #fff;
		  border-left: 9px solid transparent;
		  content: '';
		}
		.cmt-dropdown::before {
		  position: absolute;
		  top: -9px;
		  right: 5px;
		  display: inline-block;
		  border-right: 9px solid transparent;
		  border-bottom: 9px solid #ccc;
		  border-left: 9px solid transparent;
		  border-bottom-color: rgba(0, 0, 0, 0.07);
		  content: '';
		}
		#likemember-list{
			padding-left:0;
			list-style: none;
		}
		#likemember-list li{
			width: 100%;
			position: relative;
			padding: 10px 0;
			border-bottom: 1px solid #eee;
		}
		#likemember-list li:hover{
			background-color: #f8f8f8;
		}
		#likemember-list div > a > img{
			width: 40px;
			height: 40px;
			border-radius: 2px;
		}
		#likemember-list div{
			position: absolute;
			top: 13px;
			left: 0;
		}
		#likemember-list p{
			padding-left: 55px;
		}
		#likemember-list button{
			position: absolute;
			top: 15px;
			right:0;
		}
		#likemember-list .lm-name{
			font-size: 15px;
			color: #527896;
		}
		#likemember-list .lm-id{
			text-decoration: none;
			color: #8f8f8f;
			font-size: 13px;
		}
		.more-dropdown{left:-6px!important; top:130%!important;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.22)!important; -webkit-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.22)!important; border:0!important;font-size:13px!important;min-width:80px!important;}
		@media screen and (max-width: 945px){ #select-layout{ top:0; right:0; } .post-wrapper{ margin:0; float:right; } #itemList{ padding-top: 45px; } }
		@media screen and (max-width: 767px){ .post-wrapper-line{display: none;} .post-wrapper{ width:100%; float: none; padding: 20px 15px; } .section-profile { position: static; padding-top:5px; padding-right:0; padding-left:65px; } .profile-image { top:10px!important; left:10px; width:35px!important; height:35px!important; border-radius:50%!important;} .swipe-wrap > div{border-radius:0!important;} .more-dropdown{left:inherit;right:12.5%;} .recmd-profile > .recmd-profile-images > div{ height:100px; } }
		.business-message{
			width:100%;
			position: absolute;
			top: -50px;
			left: 0;
			height: 45px;
			padding-top: 10px;
			background-color: #D9EDF7;
			border-bottom: 1px solid #BCE8F1;
			color: #31708f;
			text-align: center;
			z-index:1;
			-webkit-transition:all 0.9s ease-in-out;
			-moz-transition:all 0.9s ease-in-out;
			-o-transition:all 0.9s ease-in-out;
			transition:all 0.9s ease-in-out;
		}
		.business-message.open{
			-webkit-transform: translateY(100px);
			transform: translateY(100px);
		}
		.header{
			z-index:200;
		}
    </style>
</head>
<body>
<!-- header -->
<%@ include file="head.jsp" %>
<!-- header -->
<div class="business-message">
	<i class="fa fa-building-o"></i>&nbsp;<span>쇼핑몰이나 마켓을 운영중이신가요? 새로추가된 비즈니스 계정을 이용해 보세요.</span><a href="/business" style="font-weight:bold;text-decoration:none;color:#31708f;margin-left:10px;">비즈니스 계정 바로가기</a><span style="margin-left:20px;cursor:pointer;" onclick="businessMessageClose()">닫기</span>
</div>
<!-- content -->
<div class="post-wrapper">
	<div id="follow_notData" class="noData-Message">
		<p><i class="fa fa-search-minus" style="font-size:45px; color: #7a7a7a;"></i></p>
		<h4 style="font-weight: bold; color:#3A404C;">표시할 포스트가 없습니다</h4><br>
		<p style="color:#4E5665;">팔로우들의 등록된 포스트가 없습니다. 팔로우를 더 늘려보세요!</p>
		<a href="/latest" class="btn btn-info" style="margin-top:20px;">둘러보기</a>
	</div>
	<div id="not_follow" class="noData-Message">
		<p><i class="fa fa-heart-o" style="font-size:45px; color: #FF4040;"></i></p>
		<h4 style="font-weight: bold; color:#777; text-shadow:0 1px 1px rgba(255,255,255,.8);">팔로우들의 포스트</h4><br>
		<p style="color:#4E5665; text-shadow:0 1px 1px rgba(255,255,255,.8);">회원님이 팔로우하는 사용자의 포스트가 이곳에 표시됩니다.<br>팔로우할 사용자를 찾아보세요!</p>
		<a href="/latest" class="btn btn-info" style="margin-top:20px;">둘러보기</a>
		<div id="recommendUser"><h5 style="text-align: left; color: #3A404C; font-weight: bold;">추천사용자</h5><div style="width: 100%;height: 2px;background-color: #ddd;border-bottom: 1px solid #ffffff;"></div></div>
	</div>
	<div class="clearfix"></div>
	<div id="itemList">
		<div id="select-layout">
			<a href="#" title="리스트 레이아웃으로 보기" data-btn="fn" style="margin-right: 10px;"><i class="fa fa-bars" style="color: #888; font-size: 21px;"></i></a>
			<a href="?grid=true" title="그리드 레이아웃으로 보기" data-btn="fn"><i class="glyphicon glyphicon-th"></i></a>
		</div>
	</div>
	<div style="text-align: center;margin-bottom: 30px; "><button class="btn btn-default" style="width:120px;height:34px;position:relative;" onclick="loadPost()" id="more-post-btn">더 불러오기</button></div>
</div>
<div class="container">
	<div id="notLoadData">
		<p><i class="glyphicon glyphicon-remove" style="font-size:44px; color: #a2a2a2; text-shadow: 1px 1px 0px rgba(201,201,201,1);"></i>
		<h5>서버문제로 게시글을 불러올 수 없습니다</h5>
		<button onclick="location.reload(true)" class="btn btn-default btn-sm">다시시도</button>
	</div>
</div>
<input type="hidden" id="comment-type" name="comment-type" value="default">
<input type="hidden" id="editCommentIdx" name="editCommentIdx">
<!-- footer -->
<%-- <jsp:include page = "footer.jsp" flush="false"/> --%>
<!-- footer -->

<!-- report dialog -->
<div class="modal fade" id="report-modal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index:1100;">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form id="report-form" method="post">
			<input type="hidden" id="report-idx" name="report-idx">
			<input type="hidden" id="report-type" name="report-type">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4 class="modal-title">신고하기</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="report-reason">이 게시물을 신고하는 이유가 무엇인가요?</label>
					<select class="selectpicker show-tick" id="report-reason" name="report-reason" title="선택" data-width="100%">
						<option value="spam">스팸 및 광고</option>
						<option value="improper">부적절한 주제</option>
						<option value="steal">도용 및 저작권 침해</option>
						<option value="speech">욕설 및 불편한 언어</option>
						<option value="porno">음란성</option>
						<option value="other">기타</option>
					</select>
				</div>
				<div class="form-group">
					<label for="report-opinion">추가의견</label>
					<textarea id="report-opinion" name="report-opinion" class="form-control" rows="3" cols="250" maxlength="200" style="resize:none;"></textarea>
				</div>
			</div>
			<div class="modal-footer" style="border-top:0;margin-top:0;padding:0 15px 15px 15px;">
				<button type="button" class="btn btn-primary btn-lg btn-block" onclick="report_submit(this);">보내기</button>
			</div>
			</form>
		</div>
	</div>
</div>
<div class="modal fade" id="share-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form id="report_form" method="post">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4>공유하기</h4>
			</div>
			<div class="modal-body">
				<p>공유할 사이트를 선택 :</p> 
				<ul class="list-inline share-list">
					<li><a href="javascript:fb_share();" title="페이스북으로 공유하기" style="display: block;"><img src="/resources/img/icon/share-facebook-icon.png" width="32px" height="32px"></a></li>
					<li><a href="javascript:twitter_share();" title="트위터로 공유하기" style="display: block;"><img src="/resources/img/icon/share-twitter-icon.png" width="32px" height="32px"></a></li>
					<li><a id="google-share" title="구글플러스로 공유하기" href="" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" style="display: block;"><img src="/resources/img/icon/share-googleplus-icon.png" width="32px" height="32px"></a></li>
					<li><a id="mail-share" href="" target="_blank" title="이메일로 공유하기"><img src="/resources/img/icon/share-email-icon.png" width="32px" height="32px"></a>
					<li><a id="kakao-link-btn" href="javascript:;" title="카카오로 공유하기" style="display: none;"><img width="34px;" height="34px;" src="http://dn.api1.kage.kakao.co.kr/14/dn/btqa9B90G1b/GESkkYjKCwJdYOkLvIBKZ0/o.jpg" style="margin-left:2px;" /></a></li>
				</ul>
				<div>
					<p>또는 포스트 링크 복사</p>
					<input type="text" id="input_urlCopy" class="form-control" readonly="readonly" value="" onclick="this.select();" style="background-color: #fff; cursor: text;">
				</div>
			</div>
			</form>
		</div>
	</div>
</div>
<div class="modal fade" id="likemember-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4>좋아하는 사람들</h4>
			</div>
			<div class="modal-body">
				<div id="likemember-list-loading" style="display: none;padding: 25px 0; text-align: center;"><img src="/resources/img/loading-20x20-white.gif"></div>
				<ul id="likemember-list"></ul>
			</div>
		</div>
	</div>
</div>
<input type="hidden" id="share-url">
<input type="hidden" id="share-title">
<input type="hidden" id="share-image1">
<input type="hidden" id="share-content">
<%@ include file="commonScript.jsp" %>
<script type="text/javascript" src="/resources/js/swipe.js"></script>
<script src="/resources/js/jquery.cookie.js"></script>
<script type="text/javascript">
	var index = 0;
	var gridIndex = 0;
	var hasPost = true;
	var is_mobile = isMobile();
	var swipeIndex = -1;
	var swipeBtnIndex = -1;
	var imgLength = 0;
	var likeMemberIndex = 0;
	//$.removeCookie('business-message');
   	$(function(){
   		loadPost();
   		$("#report-reason").selectpicker();
   		$(".mobile-footer-menu > ul > li:nth(0)").addClass("mf_on");
   		if(!is_mobile){
			if($.cookie("business-message") === undefined){
				if("${userDto.group_type}" == "user"){
   	   				$(".business-message").addClass("open");
   				}
			}
		}
   	});
   	
   	function businessMessageClose(){
		$(".business-message").removeClass("open");
		setTimeout(function(){
			$(".business-message").remove();
		},900);
		$.cookie("business-message", "false", { expires: 30, path: "/" });
	}
   	
	$(document).on({
		focusin: function () {
			$(this).next().css("display","block").parent().css("padding-right","75px");
		},
		focusout: function () {
			if($(this).val().length == 0){
				$(this).next().css("display","none").parent().css("padding-right","15px");
			}
		}
	}, ".comment-form");
	
	$(document).on("click", ".carousel-indicators > li", function(){
		$(this).parent().children("li").each(function(){
			$(this).removeClass("active");
		});
		mySwipe[$(this).parent().data("index")].slide($(this).index(), 300);
		$(this).addClass("active");
	});
   	
   	$("body").tooltip({
   	    selector: "[data-btn='fn']",
   	    "container": "body"
   	});
   	
   	function loadEvent(){
   		$.ajax({
   			type : "post"
		    , url : "/getEventPost"
		    , dataType : "json"
		    , timeout : 5000
		    , error : function(){
		    }
		    , success : function(response) {
		    	
		    }
		    , complete : function() { loadPost(); }
   		});
   	}
   	
   	
   	/* roading post */
   	function loadPost(){
   		var data = "index="+index+"&grid=false";
   		$.ajax({
   			type : "post"
		    , url : "/getHomeFeed"
		    , data : data
		    , dataType : "json"
		    , timeout : 5000
		    , error : function(request,status,error) {
		    	$("#notLoadData").show();
		    }
		    , success : function(response) {
		    	if(typeof response.length == "undefined" && index == 0){
		    		$("#more-post-btn").hide();
		    		$("#select-layout").hide();
	    			if(response.result == 0){
	    				$("#follow_notData").show();
	    				return false;
	    			}else{
	    				$("#not_follow").show();
	    				getRecommendUser();
	    				return false;
	    			}
	    		}else{
	    			if(response != ""){
 			    		for(var k=0;k<response.length;k++){
 			    			swipeBtnIndex++;
 			    			imgLength = 0;
 			    			var html = "<div class='post-box'><div class='section-profile'><div class='profile-image'><a href='/"+response[k].member_id+"'><img src='/resources/upload/profile/thumbnail/"+response[k].profileImage+"'></a></div><div><a href='/"+response[k].member_id+"' class='profile-name'>"+response[k].author+"</a><p class='profile-time'>"+timeleft(response[k].create_date)+"</p></div></div>";
 			    			html += "<div class='section-image'><div class='mySwipe' style='width:100%;' class='swipe'><div class='swipe-wrap'>";
 			    			if(!is_mobile){
 			    				for(var i=1;i<9;i++){
 	 			    				if(eval("response[k].image"+i) != ""){
 			    						imgLength++;
 			    						if(i == 1){
 			    							html += "<div><img src='/resources/upload/post/thumbnail/"+eval("response[k].image"+i)+"' onload='$(this).parent().parent().parent().css(\"height\",$(this).height());'></div>";
 			    						}else{
 			    							html += "<div><img src='/resources/upload/post/thumbnail/"+eval("response[k].image"+i)+"'></div>";
 			    						}
 			    					}
 	 			    			}
 			    			}else{
 			    				html += "<div><img src='/resources/upload/post/thumbnail/"+response[k].image1+"' onload='$(this).parent().parent().parent().css(\"height\",$(this).height());'></div>";
 			    			}
 			    			
 			    			html += "</div></div>";
 			    			if(!is_mobile){
 			    				if(imgLength != 1) {
 	 			    				html += "<div style='padding-left: 15px; left:0;' class='slide-image-arrow' onclick='mySwipe["+swipeBtnIndex+"].prev()'><span class='slide-arrow'><i class='fa fa-chevron-left'></i></span></div><div style='right:0; padding-left: 10px;' class='slide-image-arrow' onclick='mySwipe["+swipeBtnIndex+"].next()'><span class='slide-arrow'><i class='fa fa-chevron-right'></i></span></div><div style='position:absolute; bottom: 20px; width:100%;text-align:center;'><ol class='carousel-indicators' data-index='"+swipeBtnIndex+"' class='image-list' style='margin:0; position: static; width:100%; opacity:.85;'>";
 	 			    				for(var j=0;j<imgLength;j++){
 	 			    					if(j==0) html += "<li class='active' data-index='"+j+"'></li>";
 	 			    					else html += "<li data-index='"+j+"'></li>";
 	 			    					
 	 			    				}
 	 			    				html += "</ol></div>";
 	 			    			}
 			    			}
 			    			
 			    			html += "<div class='post-title'>"+response[k].title+"</div></div>";
 			    			html += "<div class='section-content'>"+response[k].content.parseEmoji()+"</div>";
 			    			if(typeof(response[k].tags) !== "undefined"){
 			    				html += "<div class='section-tag' style='padding:0 15px 5px 15px;'>";
 			    				for(var e=0;e<response[k].tags.length;e++){
 			    		  			html += "<a target='_blank' href='/hashtag/"+response[k].tags[e].name.replace(/&/gi,"%26").replace(/\./g, "%2E")+"' title='"+response[k].tags[e].name+"' style='text-decoration: none; margin-right: 4px;'><span class='label label-default'>"+response[k].tags[e].name+"</span></a>";
 			    		  		}
 			    				html += "</div>";
 			    			}
 			    			if(response[k].source != "" && response[k].source != null){
 			    				if(response[k].group_type == "user"){
 			    					html += "<div class='section-source'><span>출처 : <a href='"+sourceCheck(response[k].source)+"' target='_blank'>"+response[k].source+"</a></span></div>";	
 			    				}else{
 			    					html += "<div class='section-source'><a href='http://faeple.com/statistics/buylink?p="+response[k].idx+"&m="+response[k].member_idx+"&url="+response[k].source+"' target='_blank' style='color:#CF5050;text-decoration:none;'><i class='ion-bag' style='font-size:16px;'></i>&nbsp;상품구매 바로가기</a></div>";	
 			    				}
 			    			}
 			    			
 			    			html += "<div class='section-count'>";
 			    			if(response[k].like_cnt == 0){
 			    				html += "<a>좋아요&nbsp;<strong class='like-cnt'>0</strong></a>&nbsp;&nbsp;";
 			    			}else{
 			    				html += "<a href='javascript:showLikeMember("+response[k].idx+")''>좋아요&nbsp;<strong class='like-cnt'>"+response[k].like_cnt+"</strong></a>&nbsp;&nbsp;";
 			    			}
 			    			html += "&nbsp;&nbsp;<a style='cursor:pointer;' onclick='$(this).parent().next().next().children(\".comment-list-wrapper\").children(\".comment-write\").children(\".comment-form\").focus();'>댓글&nbsp;<strong class='comment-cnt'>"+response[k].comment_cnt+"</strong></a></div>";
 			    			
 			    			html += "<div class='section-button'>";
 			    			if(response[k].likeState == "unlike"){
 			    				html += "<button type='button' title='좋아요' onclick='post_like(this, "+response[k].idx+", "+response[k].member_idx+", \""+response[k].image1+"\", \""+response[k].url+"\")'><i class='fa fa-heart' style='font-size: 13px;'></i>&nbsp;좋아요</button>";
 			    			}else{
 			    				html += "<button type='button' title='좋아요' style='color:#cc2e35;' onclick='post_like(this, "+response[k].idx+", "+response[k].member_idx+", \""+response[k].image1+"\", \""+response[k].url+"\")'><i class='fa fa-heart' style='font-size: 13px;'></i>&nbsp;좋아요</button>";
 			    			}
 			    			html += "<button type='button' title='공유하기' onclick='post_share(\""+shareParse(response[k].content)+"\", \""+shareParse(response[k].title)+"\", \""+response[k].image1+"\", \""+response[k].url+"\");'><i class='icon ion-share' style='font-size: 18px;'></i>&nbsp;공유하기</button>";
 			    			html += "<div class='btn-group' style='width:33.3%;'><button type='button' style='width:100%;-webkit-box-shadow:none;box-shadow:none;' title='더보기' class='dropdown-toggle' data-toggle='dropdown'><i class='icon ion-more' style='font-size: 18px; cursor: pointer;'></i>&nbsp;더보기</button>";
 			    			html += "<ul class='dropdown-menu more-dropdown' role='menu'><li style='position: absolute; top: -14px; right: 14px;'><img src='/resources/img/arrow_small.png'></li><li><a href='/p/"+response[k].url+"' style='color: #333; font-weight: bold;''>뷰어에서 보기</a></li><li><a href='javascript:;' onclick='report("+response[k].idx+", \"post\")' style='color: #cd2f2f; font-weight: bold;'>콘텐츠 신고</a></li></ul></div></div>";
 			    			
 			    			html += "<div class='section-comment'><div class='comment-line'></div>";
 			    			var cmt_message = "가장먼저 댓글을 남겨보세요...";
 			    			if(response[k].comment_cnt != 0) { cmt_message = "댓글을 남겨보세요..."; }
 			    			html += "<div class='comment-toolbar'><span>댓글&nbsp;<span style='color:#CD0F0C; font-weight: bold;' class='comment-cnt'>"+response[k].comment_cnt+"</span>개</span><span style='position: absolute; right:15px;'><span style='color:#CD0F0C; margin-right: 9px; text-decoration: none; cursor: pointer;' title='최신순' class='on' data-order='createdate' onclick='commentOrder(this, "+response[k].idx+", \"createdate\")'><i class='fa fa-check'></i>&nbsp;최신순</span><span style='color:#a6a6a6; text-decoration: none; cursor: pointer;' title='인기순' data-order='like_cnt' onclick='commentOrder(this, "+response[k].idx+", \"like_cnt\")'><i class='fa fa-check'></i>&nbsp;인기순</span></span></div>";
 			    			html += "<div class='comment-list-wrapper'>";
		    				if(response[k].comment_cnt > 8){
 			    				html += "<span onclick='moreComment(this, "+response[k].idx+", "+response[k].comment_cnt+");' style='font-size:13px;padding: 12px 12px 8px 12px;display:block;cursor:pointer;'>이전 댓글 보기<img src='/resources/img/default-btn-loading.gif' style='margin-left: 8px; display: none;'></span>";
 			    			}
 			    			html += "<div class='comment-list'>";
 			    			if(typeof(response[k].comment) !== "undefined"){
 			    				try{
 			    					for(var h=response[k].comment.length-1;h>-1;h--){
 	 			    		  			html += "<div class='comment' data-idx='"+response[k].comment[h].idx+"' data-memidx='"+response[k].comment[h].member_idx+"'><div class='comment-profileImage'><a href='/"+response[k].comment[h].member_id+"'><img src='/resources/upload/profile/thumbnail/"+response[k].comment[h].profileImage+"'></a></div><div class='comment-info'><span class='comment-author'><a class='userLink' style='font-weight:bold;' href='/"+response[k].comment[h].member_id+"'>"+response[k].comment[h].author+"</a></span><span class='comment-time'>"+timeleft(response[k].comment[h].create_date)+"</span><div class='comment-content' data-content='"+response[k].comment[h].content+"'>"+parseContent(response[k].comment[h].content).parseEmoji()+"</div></div>";
 	 			    		  			if("${userDto.idx}" == response[k].comment[h].member_idx){
 	 			    		  				html += "<div class='comment-edit dropdown'><i class='glyphicon glyphicon-pencil' data-btn='fn' data-toggle='dropdown' title='수정 및 삭제'></i><ul class='dropdown-menu cmt-dropdown'><li onclick='comment_update_init(this, "+response[k].comment[h].idx+")'>수정하기</li><li onclick='comment_del(this, "+response[k].comment[h].idx+")' style='color:#cd2f2f;'>삭제하기</li></ul></div></div>";
 	 			    					}else{
 	 			    						html += "<div class='comment-report'><i class='fa fa-flag' data-btn='fn' title='신고하기' onclick='report("+response[k].comment[h].idx+",\"comment\" )' /></div>";
 	 			    						html += "<div class='comment-reply'><i class='fa fa-reply' data-btn='fn' title='답변하기' onclick='commentReply(this, \""+response[k].comment[h].member_id+"\")' /></div></div>";
 	 			    					}
 	 			    			  	}
 			    				}catch(e){
 			    					alert(e);
 			    				}
 			    				
 			    			}
 			    			html += "</div>";
 			    			html += "<div class='comment-write'><input class='comment-form' maxlength='300' placeholder='"+cmt_message+"'><button type='button' class='btn btn-success btn-sm comment-write-btn' onclick='submitComment(this, "+response[k].idx+", "+response[k].member_idx+", \""+response[k].image1+"\", \""+response[k].url+"\")'>전송</button></div>";			
 			    			html += "<div class='comment-update'><input class='comment-form' maxlength='300' title='취소하려면 esc키를 눌러주세요' data-btn='fn' onkeyup='if(event.keyCode == 27){ $(this).parent().hide(); $(this).parent().parent().children(\".comment-write\").show(); }'><button type='button' class='btn btn-success btn-sm comment-write-btn' onclick='comment_update(this)'>전송</button></div>";
 			    			
 			    			html += "</div></div>";
		    				$("#itemList").append(html);
 			    		}
 			    		if(!is_mobile){
 			    			var elem = document.querySelectorAll(".mySwipe");
 			    			window.mySwipe = new Array();
 			    			for(index;index<elem.length;index++){
 			    				swipeIndex++;
 			    				window.mySwipe[swipeIndex] = Swipe(elem[index], {
 				    				callback: function(index, elem){
 				    					var obj = $(elem).parent().parent().parent();
 				    					obj.animate({"height": $(elem).height()}, 200, "easeInOutQuint");
 				    					obj.find(".carousel-indicators").children("li").each(function(){
 				    						$(this).removeClass("active");
 				    					}).siblings(":nth-child("+(index+1)+")").addClass("active");
 				    				}
 				    			});
 			    			}
 			    		}else{
 			    			index +=25;
 			    		}
		    			if(response.length < 25){
		    				$("#more-post-btn").hide();
		    			}
		    		}else{
		    			$("#more-post-btn").hide();
		    		}
	    		}
		    }
		    , beforeSend: function() {
		    	$("#more-post-btn").attr("disabled","disabled").html("<div class='spinner small'></div>");
		    }
		    , complete: function() {
		    	$("#more-post-btn").removeAttr("disabled").html("더 불러오기");
		    }
		});//end load post ajax
   	}
   	
   	function showLikeMember(idx){
   		$("#likemember-list").empty();
   		$("#likemember-modal").modal("show");
		$.ajax({
			type : "post"
		    , url : "/getPostLikeMemberList?post_idx="+idx+"&index="+likeMemberIndex+"&loadSize=40"
		    , dataType : "json"
		    , timeout : 5000
		  	, error : function() {
	  			$("#likemember-list").html("<li style='text-align:center;'>불러올 수 없습니다</li>");
		    }
		    , success : function(response) {
		    	var html = "";
		    	for(var i=0;i<response.length;i++){
		    		html += "<li><div><a href='/"+response[i].member_id+"' target='_blank'><img src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></a></div><p><a target='_blank' class='lm-name' href='/"+response[i].member_id+"'>"+response[i].member_name+"</a><br><a target='_blank' class='lm-id' href='/"+response[i].member_id+"'>@"+response[i].member_id+"</a></p>";
		    		if(response[i].followState == "unFollow"){
		    			html += "<button type='button' class='btn btn-default btn-sm' onclick='profile_follow(this, \"follow\", "+response[i].member_idx+")'>팔로우</button></li>";
		    		}else if(response[i].followState == "following"){
		    			html += "<button type='button' class='btn btn-success btn-sm' onclick='profile_follow(this, \"unfollow\", "+response[i].member_idx+")'><i class='fa fa-check'></i>&nbsp;팔로잉</button></li>";
		    		}else{
		    			html += "</li>";
		    		}
		    	}
		    	$("#likemember-list").append(html);
		    }, beforeSend: function() {
		    	$("#likemember-list-loading").show();
		    }, complete : function(){
		    	$("#likemember-list-loading").hide();
		    }
		});
   	}
   	
   	function post_like(button, post_idx, author_idx, refer_img, refer_url){
		var data = "post_idx="+post_idx+"&author_idx="+author_idx+"&refer_img="+refer_img+"&refer_url="+refer_url;
		setTimeout(function(){
			$.ajax({
		        type: "post",
		        url: "/addLike",
		        data: data,
		        dataType: "text",
		        timeout: 5000,
		        error: function () {
		            alertShow("danger", "다시 시도해주세요", 2000);
		        },
		        success: function (response) {
		        	var count = $(button).parent().prev().find(".like-cnt");
		            if (response == "unlike") {
		            	count.html(parseInt(count.html())-1);
		            	$(button).css("color","#555");
		            } else if (response == "execute") {
		            	count.html(parseInt(count.html())+1);
		            	$(button).css("color","#cc2e35");
		            } else {
		                alert('잘못된 접근입니다');
		            }
		        }
		    });
		}, 300);
    }
   	
   	function report(idx, type){
   		if(type=="comment"){
			$("#report-reason").prev().html("이 댓글을 신고하는 이유가 무엇인가요?");
			$("#report-type").val("comment");
		}else{
			$("#report-reason").prev().html("이 게시물을 신고하는 이유가 무엇인가요?");
			$("#report-type").val("post");
		}
   		$("#report-idx").val(idx);
   		$("#report-modal").modal("show");
   	}
   	
   	function post_share(content, title, image1, url){
   		$("#input_urlCopy").val(location.host+"/p/"+url);
   		$("#google-share").attr("href", "https://plus.google.com/share?url={"+location.host+"/p/"+url+"}");
   		$("#mail-share").attr("href", "mailto:?subject="+title+"&body="+content+"%0D%0AURL : "+location.host+"/p/"+url);
   		$("#share-url").val(location.host+"/p/"+url);
   		$("#share-title").val(title);
   		$("#share-image1").val(location.host+"/resources/upload/post/thumbnail/"+image1);
   		$("#share-content").val(content);
   		if(isMobile()){
   		    $("#kakao-link-btn").show();
   		}
   		$("#share-modal").modal("show");
   		Kakao.Link.createTalkLinkButton({
   	   		container: '#kakao-link-btn',
   	   		label: 'Faeple on Style : '+title,
   	   		image: {
   	   			src: location.host+"/resources/upload/post/thumbnail/"+image1,
   	   			width: '300',
   	   			height: '200'
   	   		},
   	   		webButton: {
   	   			text: 'Faeple.com 이동',
   	   			url: location.host+"/p/"+url
   	   		}
   	   	});
   	}
   	
   	function fb_share(){
   		var content = $("#share-content").val();
   		var url = $("#share-url").val();
   		var obj = {
   			method: "feed",
   			link: url,
   			picture: $("#share-image1").val(),
   			name: $("#share-title").val(),
   			caption: url,
   			description: content
   		};
   		
   		function callback(response){
   			if(response && response.post_id){
   				alert('페이스북에 공유되었습니다');
   				$("#share-modal").modal("hide");
   			}
   		}
   		FB.ui(obj, callback);
   	}
   	function twitter_share(){
   		var content = "Faeple on Style : "+ $("#share-url").val();
   		var url = $("#share-url").val();
   		var link = "https://twitter.com/intent/tweet?text="+content+"&url="+url;
   		window.open(link,'트위터로 공유하기','scrollbars=no,toolbar=no,resizable=yes,width=600,height=260');
   	}
   	
   	function moreComment(el, post_idx, comment_size){
   		var data = "post_idx="+post_idx+"&index="+$(el).next().children(".comment").size();
   		var loading = $(el).children("img");
   		$.ajax({
   			type : "post"
		    , url : "/getCommentWithPost"
		    , data : data
		    , dataType : "json"
		    , timeout : 5000
		    , error : function() {
		    	//$("#item-commentList").append("<div style='text-align:center;'><i class='glyphicon glyphicon-remove' style='color:#BF0000;'></i>&nbsp;댓글을 가져올 수 없습니다.</div>");
		    }
		    , success : function(data) {
		    	if(data != ""){
		    		var comm = "";
		    		for(var i=data.length-1;i>-1;i--){
		    			comm += "<div class='comment' data-idx='"+data[i].idx+"' data-memidx='"+data[i].member_idx+"'><div class='comment-profileImage'><a href='/"+data[i].member_id+"' target='_blank'><img src='/resources/upload/profile/thumbnail/"+data[i].profileImage+"'></a></div><div class='comment-info'><span class='comment-author'><a href='/"+data[i].member_id+"' target='_blank' class='userLink' style='font-weight:bold;'>"+data[i].author+"</a></span><span class='comment-time'>"+timeleft(data[i].create_date)+"</span><div class='comment-content' data-content='"+data[i].content+"'>"+parseContent(data[i].content).parseEmoji()+"</div></div>";
		    			if("${userDto.idx}" == data[i].member_idx){
		    				comm += "<div class='comment-edit dropdown'><i class='glyphicon glyphicon-pencil' data-btn='fn' data-toggle='dropdown' title='수정 및 삭제'></i><ul class='dropdown-menu cmt-dropdown'><li onclick='comment_update_init(this, "+data[i].idx+")'>수정하기</li><li onclick='comment_del(this, "+data[i].idx+")' style='color:#cd2f2f;'>삭제하기</li></ul></div></div>";
		    			}else{
		    				comm += "<div class='comment-report'><i class='fa fa-flag' data-btn='fn' title='신고하기' onclick='report("+data[i].idx+",\"comment\" )' /></div>";
		    				comm += "<div class='comment-reply'><i class='fa fa-reply' data-btn='fn' title='답변하기' onclick='commentReply(this, \""+data[i].member_id+"\")' /></div>";
		    				comm += "</div>";
		    			}
 			    	}
		    		$(el).next().prepend(comm);
		    		if($(el).next().children(".comment").size() == comment_size){
		    			$(el).hide();
		    		}
		    	}else{
		    		
		    	}
		    }
		    , beforeSend: function() {
		    	loading.show();
		    }
		    , complete: function() {
		    	loading.hide();
		    }
   		});
   	}
   	
   	String.prototype.parseTagUser = function() {
   		hashpattern = /(@[A-Za-z0-9-_]+)/g;
   		return this.match(hashpattern);
   	};
   	
   	function submitComment(el, post_idx, author_idx, image1, post_url){
   		var content = $(el).prev().val();
		if(content != ""){
			var tagUser = content.parseTagUser();
	   		if(tagUser != null) tagUser = tagUser.toString();
	   		var data = "post_idx="+post_idx+"&content="+content+"&author_idx="+author_idx+"&refer_img="+image1+"&refer_url="+post_url+"&tagUser="+tagUser+"&comment-type="+$("#comment-type").val();
			$.ajax({
  				type : "post"
  			    , url : "/submitComment"
  			    , data : data
  			    , dataType : "text"
  			    , timeout : 5000
  			  	, error : function() {
  			  		alertShow("danger","다시 시도해주세요", 2000);
  			    }
  			    , success : function(response) {
  			    	if(response != "role" && response != "tag"){
  			    		$(el).parent().prev().append("<div class='comment' data-idx='"+response+"' data-memidx='${userDto.idx}'><div class='comment-profileImage'><a href='/${userDto.id}'><img src='/resources/upload/profile/thumbnail/${userDto.profileImage}'></a></div><div class='comment-info'><span class='comment-author'><a href='/${userDto.id}' class='userLink' style='font-weight:bold;'>${userDto.name}</a></span><span class='comment-time'>방금전</span><div class='comment-content' data-content='"+content+"'>"+parseContent(content).parseEmoji()+"</div></div><div class='comment-edit dropdown'><i class='glyphicon glyphicon-pencil' data-btn='fn' data-toggle='dropdown' title='수정 및 삭제'></i><ul class='dropdown-menu cmt-dropdown'><li onclick='comment_update_init(this, "+response+")'>수정하기</li><li onclick='comment_del(this, "+response+")' style='color:#cd2f2f;'>삭제하기</li></ul></div></div>");
  			    		$(el).prev().val("");
  			    		alertShow("success","<strong>댓글이 작성되었습니다</strong>", 2000);
  			    		var commentSize = $(el).closest(".section-comment").prev().prev().find(".comment-cnt");
  			    		commentSize.html(parseInt(commentSize.html())+1);
  			    	}else if(response == "role"){
  			    		alertShow("danger","로그인이 필요합니다", 2000);
  			    	}else if(response == "tag"){
  			    		alertShow("danger","상대방 태그가 잘못되었습니다<br>아이디를 확인해 주세요", 6000);
  			    	}
  			    	$("#comment-type").val("default");
  			    }
  			});
		}else{
			alertShow("info","내용을 입력해 주세요", 2000);
		}
   	}
   	
   	function commentReply(el, id){
   		var input = $(el).closest(".comment-list").next().children("input");
   		input.val("@"+id+" ");
   		input.focus();
   		input[0].setSelectionRange(input.val().length, input.val().length);
   		$("#comment-type").val("reply");
   	}
   	
   	function comment_update_init(el, idx){
   		$("#editCommentIdx").val(idx);
   		$(el).closest(".comment-list-wrapper").children(".comment-update").show().children("input").val($(el).closest(".comment").find(".comment-content").data("content")).focus();
   		$(el).closest(".comment-list-wrapper").children(".comment-write").hide();
   	}
   	
   	function comment_update(el){
   		var data = "comment_idx="+$("#editCommentIdx").val()+"&content="+$(el).prev().val();
   		$.ajax({
   			type : "post"
   		    , url : "/commentUpdate"
   		   	, data : data
   		    , dataType : "text"
   		    , timeout : 5000
   		    , error : function() {
   		    	alertShow("danger","서버가 응답하지 않습니다", 2000);
   		    }
   		    , success : function(response) {
   		    	if(response == "execute"){
   		    		$(el).closest(".comment-list-wrapper").children(".comment-list").children("div.comment").each(function(){
   		    			if($(this).data("idx") == $("#editCommentIdx").val()){
   		    				$(this).children(".comment-info").children(".comment-content").data("content", $(el).prev().val()).html(parseContent($(el).prev().val()).parseEmoji());
   		    				$(el).parent().hide().prev().show();
   		    				alertShow("success","<strong>수정되었습니다</strong>", 2000);
   		    				return false;
   		    			}
   		    		});
   		    	}else if(response == "fail"){
   		    		alertShow("danger","다시 시도해주세요", 2000);
   		    	}else{
   		    		location.href='/warning.jsp';
   		    	}
   		    }
   		    , beforeSend: function() {
   		    	$(el).attr("disabled","disabled");
   		    }
   		    , complete: function() {
   		    	$(el).removeAttr("disabled","disabled");
   		    }
   		});
   	}
   	
   	function comment_del(el, idx){
   		if(confirm('정말로 삭제할까요?')){
   			$.ajax({
   				type : "post"
   			    , url : "/commentDelete?comment_idx="+idx
   			    , dataType : "text"
   			    , timeout : 5000
   			    , error : function() {
   			    	alertShow("danger","다시 시도해주세요", 2000);
   			    }
   			    , success : function(response) {
   			    	if(response == "execute"){
   			    		var count = $(el).closest(".section-comment").prev().prev().find(".comment-cnt");
   			    		count.html(parseInt(count.html())-1);
						$(el).closest(".comment").remove();
   			    		alertShow("success","<strong>삭제되었습니다</strong>", 2000);
   			    	}else if(response == "fail"){
   			    		alertShow("danger","다시 시도해주세요", 2000);
   			    	}else{
   			    		location.href='/warning.jsp';
   			    	}
   			    }
			});
   		}
   	}
   	
   	function sourceCheck(url){
   		if (!/^http:\/\//.test(url)) {
   	        return "http://" + url;
   	    }else{
   	    	return url;
   	    }
   	}
   	
   	function getRecommendUser(){
   		$.ajax({
			url: "/getRecommendUser?idx=${userDto.idx}",
			dataType: "json",
			timeout: 5000,
            success: function (response) {
            	for(var i=0;i<response.length;i++){
            		var html ="<div class='recmd-profile'><div class='recmd-profile-header'><img src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'><div><p>"+response[i].name+"</p><span>@"+response[i].id+"</span></div><button type='button' onclick='profile_follow(this, \"follow\", "+response[i].idx+");'>팔로우</button></div>";
            		html +="<div class='recmd-profile-images'><div><img src='/resources/upload/post/thumbnail/"+response[i].image1+"'></div><div><img src='/resources/upload/post/thumbnail/"+response[i].image2+"'></div><div><img src='/resources/upload/post/thumbnail/"+response[i].image3+"'></div><div><img src='/resources/upload/post/thumbnail/"+response[i].image4+"'></div><div><img src='/resources/upload/post/thumbnail/"+response[i].image5+"'></div></div><div class='clearfix'></div>";
            		//html +="<div class='recmd-profile-bottom'></div>";
            		$("#recommendUser").append(html);
            	}
            }
        });
   	}
   	
	function profile_follow(obj, type, idx) {
		if("${userDto.idx}" == ""){
			alertShow("danger", "로그인이 필요합니다", 2000);
		}else{
			var data = "following_idx="+idx;
			if (type == "follow") {
				$(obj).html("<div class='spinner small'></div>");
				setTimeout(function(){
					$.ajax({
						type: "post",
						url: "/follow",
						data: data,
						dataType: "text",
						timeout: 5000,
						error: function () {
   	                        alertShow("danger", "다시 시도해주세요", 2000);
   	                    },
   	                    success: function (response) {
   	                        if (response == "success") {
   	                            $(obj).addClass("active").html("<i class='fa fa-check'></i>&nbsp;팔로잉").attr("onclick", "profile_follow(this, 'unfollow', "+idx+");");
   	                        }else if (response == "closed") {
   	                            alertShow("danger", "팔로우를 받지 않는 사용자입니다", 2000);
   	                        }else if (response == "role") {
   	                            alertShow("danger", "로그인이 필요합니다", 2000);
   	                        }else {
   	                            alertShow("danger", "다시 시도해주세요", 2000);
   	                        }
   	                    },
   	                    complete: function(){
   	                    	
   	                    }
   	                });
               	},300);
			}else{
				$(obj).html("<div class='spinner small'></div>");
				setTimeout(function(){
					$.ajax({
	                    type: "post",
	                    url: "/unFollow",
	                    data: data,
	                    dataType: "text",
	                    timeout: 5000,
	                    error: function () {
	                        alertShow("danger", "다시 시도해주세요", 2000);
	                    },
	                    success: function (response) {
	                        if (response == "fail") {
	                            alertShow("danger", "다시 시도해주세요", 2000);
	                        } else {
	                            $(obj).removeAttr("data-state").removeClass("active").attr("onclick", "profile_follow(this, 'follow', "+idx+");").html("팔로우");
	                        }
	                    }
	                });
				},300);
			}
   		}
    }
   	
   	function report_submit(obj){
		$(obj).html("전송중...").attr("disabled", "disabled");
		setTimeout(function(){
			$.ajax({
				type : "post"
			    , url : "/submitReport"
			    , dataType : "text"
			    , data : $("#report-form").serialize()
			    , timeout : 5000
			  	, error : function() {
			  		alertShow("danger", "다시 시도해주세요" ,1500);
			  		$(obj).html("보내기").removeAttr("disabled");
			    }
			    , success : function(response) {
			    	if(response){
			    		alertShow("success", "신고되었습니다" ,1500);
			    	}else{
			    		alertShow("danger", "다시 시도해주세요" ,1500);
			    	}
			    	$("#report-modal").modal("hide");
			    }
			 	, complete: function(){
			 		$(obj).html("보내기").removeAttr("disabled");
			 		$("#report-form")[0].reset();
			 	}
			});
		}, 800);
   	}
</script>
</body>
</html>